﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Playground.aspx.cs"
    Inherits="WebApplication1.Playground" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <title>DK Playground</title>
    <style>
        DIV#fromTemplate {
            display: inline-block;
            border: chocolate double 6px;
            padding: 5px;
        }

        .niceCheck {
            display: inline-block;
            background-color: #161616;
            cursor: pointer;
            height: 12px;
            width: 12px;
            position: relative;
        }

        .check {
            background-image: url(Images/check.png);
            position: absolute;
            background-repeat: no-repeat;
            height: 14px;
            width: 14px;
            top: -3px;
            left: 1px;
            display: none;
        }
        .checked .check {
            display: block;
        }

        .niceCheck input {
            display: none;
        }

    </style>
    <link type="text/css" rel="stylesheet" href="Scripts/jquery.datepick/jquery.ui.datepicker.css" />
    <link type="text/css" rel="stylesheet" href="Scripts/jquery.datepick/jquery.ui.datepicker.darkness.css" />
    <script type='text/javascript' src='Scripts/jQuery/jquery.js'></script>
    <script type='text/javascript' src='Scripts/jQuery/jquery.checkbox.js'></script>
    <script type='text/javascript' src='Scripts/jQuery/jquery-ui-1.8.23.custom.js'></script>
    <script type='text/javascript' src='Scripts/EmbeddedJS/ejs.js'></script>
    <script type='text/javascript' src='Scripts/EmbeddedJS/ejs_fulljslint.js'></script>
    <script type="text/javascript" src="Scripts/MyScripts/jQueryDeferred.js"></script>
    <script type="text/javascript" src="Scripts/MyScripts/jQueryPlugins.js"></script>
    <script type="text/javascript" src="Scripts/MyScripts/CodingStyles.js"></script>
    <script type="text/javascript">
        function log(text) {
            //console.log('[' + (new Date()).toGMTString() + ']: ' + text);
        }

        var data = {
            id: "98",
            question: "What are you doing now?",
            author: "Mihalich88",
            arr: [0, 1, 4, 5, 6, 7]
        };

        $().ready(function () {
            $('#fromTemplate').html(new EJS({ url: 'Templates/template1.ejs' }).render(data));

            $('#updateTemplate').click(function () {
                $.ajax({
                    url: 'handler.tmp?c=1',
                    type: "get",
                    data: { c: 1 },
                    success: function (args) {
                        new EJS({ url: 'Templates/template1.ejs' }).update('fromTemplate', $.parseJSON(args));
                    }
                });

                return false;
            });

            //alert($("#updateTemplate").offset().top);       

            console.log('asdasd parent length: ' + $('#asdasd').parent().length);
            console.log('asdasd parent: ' + $('#asdasd').parent()[0].nodeName);
            console.log('asdasd parent div length: ' + $('#asdasd').parent('div').length);
            console.log('asdasd parent div: ' + $('#asdasd').parent($('div'))[0].nodeName);
        });

        function fff() {
            $('input:checkbox').attr('checked', 'checked');
		}

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
    <span class="niceCheck" style="">
        <input type="checkbox" name="ch1" />
        <span class="check"></span>
    </span>
    
    <input type="button" onclick="fff()" value="asd"></input>

    <input id="asd"></input>
    <div id="fromTemplate">
    </div>
    <button id="updateTemplate">
        Update</button>
    <hr />
    <p>
        Я первый абзац.</p>
    <p>
        Я второй абзац.</p>
    <p>
        Я третий абзац.</p>
    <p>
        Я четвертый абзац.</p>
    <input type="button" id="but1" value="Изменить оформление абзацев используя опции по умолчанию" />
    <br />
    <br />
    <input type="button" id="but2" value="Изменить оформление абзацев передав первую опцию" />
    <br />
    <br />
    <input type="button" id="but3" value="Изменить оформление абзацев передав обе опции" />
    <br />
    <br />
    <div>
    <ul>
        <li><a id="asdasd" href="http://news.bbc.co.uk/">News on BBC website</a></li>
        <li><a href="http://nytimes.com/">Frontpage of The New York Times</a></li>
        <li><a href="http://www.guardian.co.uk/">Guardian Unlimited</a></li>
    </ul>
    </div>
    <div id="d1" style="width: 100px; height: 100px; background: red;">
        1</div>
    <div id="d2" style="width: 100px; height: 100px; background: green;">
        2</div>
</asp:Content>
